<template>
  <div>
    <div class="indexUser">
      <div>
        <!-- header  点击 -->
        <headers :userList="userList"></headers>
      </div>
      <div class="bg1 userBox">
        <div class="wrap bgw userAddress">
          <div class="title">新增收货地址</div>
          <div class="box">
            <div>
              <p class="fl">姓名</p>
              <input v-model="name" type="text" />
            </div>
            <div class="addresss">
              <p class="fl">地区</p>
              <!-- <el-cascader
          size="large"
          :options="options"
          v-model="address"
          @change="handleChange"
              ></el-cascader>-->
              <div @mouseover="addType = 1" @mouseout="addType = 0" class="addresList">
                <p v-show="add1 == '' ">请选择地址</p>
                <p v-show="add1 != '' ">{{add1}} {{add2}} {{add3}}</p>
                <div v-show="addType == 1">
                  <ul class="a1">
                    <li
                      :class="{active:act1 == i}"
                      @click="aTab1(v,i)"
                      v-for="(v,i) in addressList1"
                      :key="i"
                    >{{v.name}}</li>
                  </ul>
                  <ul v-show="addressList2!='' " class="a2">
                    <li
                      :class="{active:act2 == i}"
                      @click="aTab2(v,i)"
                      v-for="(v,i) in addressList2"
                      :key="i"
                    >{{v.name}}</li>
                  </ul>
                  <ul v-show="addressList3!='' " class="a3">
                    <li
                      :class="{active:act3 == i}"
                      @click="aTab3(v,i)"
                      v-for="(v,i) in addressList3"
                      :key="i"
                    >{{v.name}}</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="details">
              <p class="fl">详细地址</p>
              <textarea v-model="addDetails"></textarea>
            </div>
            <div>
              <p class="fl">手机号</p>
              <input maxlength="11" v-model="phone" />
            </div>
            <!-- <div>
        <p class="fl" style="width:150px"></p>
        <span></span> 设为默认地址
            </div>-->
            <div>
              <p class="fl"></p>
              <button @click="checking()">确定</button>
            </div>
          </div>
          <!-- 地址  列表 -->
          <div class="list">
            <div class="title">
              <div>收货人</div>
              <div>所在地区</div>
              <div>详细地址</div>
              <div>手机号</div>
              <div>操作</div>
            </div>
            <div v-for="(v,i) in list " :key="i">
              <div>{{v.user_name}}</div>
              <div class="txt">
                <p class="two">{{v.city_name}} {{v.area_name}}</p>
              </div>
              <div class="txt">
                <p class="two">{{v.address}}</p>
              </div>
              <div>{{v.mobile}}</div>
              <div>
                <span class="set">操作</span>
                <span @click="remove(v)">删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <publicBottom></publicBottom>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="removes()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import headers from "./header"; // 头部 TOP 和header
import publicBottom from "@/components/public/public_bottom"; //底部

import { usergetinfo } from "@/request/user";
import { regionData, CodeToText } from "element-china-area-data"; // 自定义 地图
import { user_address_List } from "@/request/user"; // 地址列表
import { user_address_Add } from "@/request/user"; // 添加地址
import { getAreaLista } from "@/request/user"; // 新增地址列表
import { user_address_del } from "@/request/user"; //删除地址

export default {
  components: {
    headers,
    publicBottom
  },
  data() {
    return {
      dialogVisible: false,
      options: regionData,
      selectedOptions: [],
      removeData: [], //删除地址
      name: "", // 姓名
      addDetails: "", // 详细 收货地址
      phone: "", // 手机号
      list: [], //收货 地址
      addressList1: [],
      addressList2: [],
      addressList3: [],
      addType: 0,
      act1: -1,
      act2: -1,
      act3: -1,
      add1: "",
      add2: "",
      add3: "",
      sendAdd: "", // 提交给 后台的 数字
      userList: [] // 个人信息
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }

    this.init();
    this.start();
    this.staetList();
    // this.state=this.$route.query.state
  },
  methods: {
    removes() {
      this.dialogVisible = false
      user_address_del({
        token: this.$tokens,
        id: this.removeData.id
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.start()
        }
      });
    },
    remove(v) {
      this.removeData = v;
      this.dialogVisible = true;
    },
    aTab1(v, i) {
      this.add1 = v.name;
      this.add2 = "";
      this.act2 = -1;
      this.act3 = -1;
      this.add3 = "";
      this.sendAdd = "";
      this.addressList3 = [];
      this.act1 = i;
      getAreaLista({
        pid: v.id
      }).then(res => {
        this.addressList2 = res.data;
      });
    },
    aTab2(v, i) {
      this.add2 = "- " + v.name;
      this.add3 = "";
      this.act3 = -1;
      this.sendAdd = "";
      this.act2 = i;
      getAreaLista({
        pid: v.id
      }).then(res => {
        this.addressList3 = res.data;
      });
    },
    aTab3(v, i) {
      this.add3 = "- " + v.name;
      this.act3 = i;
      this.sendAdd = v.pid;
    },
    checking() {
      if (this.name == "") {
        this.$message.error("请输入 姓名");
      } else if (this.address == "") {
        this.$message.error("请选择 地址");
      } else if (this.addDetails == "") {
        this.$message.error("请填写 详细地址");
      } else if (this.phone == "") {
        this.$message.error("手机号不能为空");
      } else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message.error("手机号格式不正确");
      } else {
        this.send();
      }
    },
    send() {
      console.log(this.sendAdd);
      user_address_Add({
        token: this.$tokens,
        user_name: this.name,
        mobile: this.phone,
        area_id: this.sendAdd,
        address: this.addDetails
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.add1 = "";
          this.add2 = "";
          this.add3 = "";
          this.name = "";
          this.phone = "";
          this.sendAdd = "";
          this.addDetails = "";
          this.start();
        }
      });
    },
    start() {
      user_address_List({
        token: this.$tokens
      }).then(res => {
        this.list = res.data.data;
      });
    },
    staetList() {
      getAreaLista({
        pid: 1
      }).then(res => {
        this.addressList1 = res.data;
      });
    },
    handleChange(e) {
      let arr = [];
      for (let i = 0; i < e.length; i++) {
        let num = e[i];
        num = Number(num);
        arr.push(num);
      }
      console.log(arr);

      this.address = arr;
      var msg =
        CodeToText[arr[0]] +
        "-" +
        CodeToText[arr[1]] +
        "-" +
        CodeToText[arr[2]];
      console.log(msg);
    },
    init() {
      //   个人信息
      usergetinfo({
        token: this.$tokens
      }).then(res => {
        this.userList = res.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.addresList {
  margin-left: 96px;
  width: 400px;
  height: 47px;
  line-height: 47px;
  font-size: 18px;
  text-indent: 10px;
  border: 1px solid #a8a8a8 !important;
  position: relative;
  background: white;
  p {
    width: 100% !important;
  }
  ul {
    background: white;
    position: absolute;
    top: 47px;
    width: 133px;
    height: 300px;
    border: 1px solid#a8a8a8;
    z-index: 2;
    overflow-y: auto;
  }
  li {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    overflow: hidden;
  }
  li:hover {
    color: #4eeec8;
  }
  .active {
    color: #4eeec8;
  }
  .a1 {
    left: 0;
  }
  .a2 {
    left: 133px;
  }
  .a3 {
    left: 266px;
  }
}
.list {
  font-size: 18px;
  padding-left: 34px;
  padding-right: 34px;
  padding-bottom: 60px;
  .title {
    border-top: 1px solid #e6e6e6;
    height: 66px;
    background: #f6f6f6;
    text-indent: 0px;
    div {
      height: 66px;
      line-height: 66px;
      width: 20%;
      text-align: center;
      border: none !important;
    }
  }
  .txt {
    padding-top: 30px;
    line-height: 26px;
  }
  > div {
    height: 92px;
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    div {
      border-left: 1px solid #e6e6e6;
      height: 92px;
      line-height: 92px;
      width: 20%;
      text-align: center;
    }
    div:nth-of-type(5) {
      border-right: 1px solid #e6e6e6;
      padding-left: 30px;
      padding-right: 30px;
    }
  }
  span {
    display: inline-block;
    width: 50%;
    text-align: center;
    color: #ee4e4e;
  }
  .set {
    color: #4eeec8;
  }
}
.box {
  padding-top: 40px;
  padding-left: 88px;
  padding-bottom: 40px;
  font-size: 22px;
  button {
    width: 174px;
    height: 52px;
    font-size: 22px;
  }
  > div {
    margin-bottom: 37px;
    height: 47px;
    position: relative;
  }
  span {
    display: block;
    border-radius: 50%;
    left: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #a8a8a8;
    position: absolute;
    left: 100px;
    top: 0;
  }
  .addresss {
    input {
      text-indent: 0;
    }
  }
  .details {
    height: 220px;
  }
  textarea {
    height: 220px;
    width: 420px;
    //  padding-top: 20px;
    text-indent: 10px;
    font-size: 22px;
  }
  p {
    height: 47px;
    line-height: 47px;
    width: 96px;
  }
  input {
    width: 400px;
    height: 47px;
    font-size: 22px;
    text-indent: 10px;
    border: 1px solid #a8a8a8 !important;
  }

  .userAddress {
    border: 1px solid #e6e6e6;
  }
}
.title {
  height: 69px;
  line-height: 69px;
  font-size: 18px;
  text-indent: 36px;
  border-bottom: 1px solid #e6e6e6;
}
</style>